<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta name="renderer" content="webkit">
    <script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../../../node_modules/vue/dist/vue.min.js"></script>
    <link rel="stylesheet" href="../../../node_modules/element-ui/lib/theme-chalk/index.css">
    <script src="../../../node_modules/element-ui/lib/index.js"></script>


    <!-- 自定义 -->
    <script src="../../../node_modules/mockjs/dist/mock.js"></script>
    <script src="../static/js/mock_config.js"></script>
    <script src="../static/js/index.js"></script>
    <link rel="stylesheet" href="../../index.css">
    <!-- PC -->
    <link rel="stylesheet" href="../static/css/InStore.css" media="only screen and (max-height:1600px) ">
    <!-- 手机App -->
    <link rel="stylesheet" href="../static/css/InStoreApp.css" media="only screen and (min-height:1600px) ">
</head>

<body>
    <!--头部-->
    <!-- <div class="header">
        入库看板
    </div> -->
    <!--主体-->
    <div class="main clearfix" id="app">
        <div class="header">
            <header>
                <div class="navbar">
                    <div class="card_T">
                        <div class="card A" style="background-color:#0b87fa;color: white;">
                            <ul class="header-text">
                                <li>
                                    <h8 style="line-height: 78px;">入库看板</h8>
                                </li>
                            </ul>

                        </div>
                    </div>
                    <div class="pc_content">
                        <div class="card_header">
                            <div class="card C" style="background-color: #33814e;">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">
                                        <h4>材料采购待收货</h4>
                                    </li>
                                    <li class="list-group-item1">
                                        <h3 id="WaitPrtQty">{{defaultDt1.length}}款</h3>
                                    </li>
                                </ul>
                            </div>
                            <div class="card C" style="background: #33814e; ">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">
                                        <h4>委外加工待收货</h4>
                                    </li>
                                    <li class="list-group-item1">
                                        <h3 id="Waitcompleted">{{defaultDt2.length}}款</h3>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="card_header">
                            <div class="card C" style="background:#33814e;">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">
                                        <h4>注塑待入库</h4>
                                    </li>
                                    <li class="list-group-item1">
                                        <h3 id="Col8Qty1">{{defaultDt3.length}}款</h3>
                                    </li>
                                </ul>
                            </div>
                            <div class="card C B" style="background: #33814e;">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">
                                        <h4>组装待入库</h4>
                                    </li>
                                    <li class="list-group-item1">
                                        <h3 id="Col7Qty1">{{defaultDt4.length}}款</h3>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
        </div>

        <div class="body_div">
            <div class="main-left">
                <div class="border-container">
                    <div class="name-title">
                        材料采购待收货
                    </div>

                    <div>
                        <el-table :data="defaultDt1" ref="defaultDt1" :default-sort="{prop: 'date', order: 'ascending'}" :height=el_table_height stripe="true">
                            <el-table-column prop="SupplierCode" align="center" label="供应商">
                            </el-table-column>
                            <el-table-column prop="modname" align="center" width="200" label="材料名称">
                            </el-table-column>
                            <el-table-column prop="QtyRev" align="center" label="待收货数量">
                            </el-table-column>
                            <el-table-column align="center" label="采购交期">
                                <template slot-scope="scope">
                                <div :class="scope.row.Stauts" v-html="scope.row.date">
                                </div>
                            </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>
                <div class="border-container">
                    <div class="name-title">
                        委外加工待收货
                    </div>
                    <div>
                        <el-table :data="defaultDt2" stripe="true" ref="defaultDt2" :height=el_table_height :default-sort="{prop: 'date', order: 'ascending'}">
                            <el-table-column prop="SupplierCode" align="center" label="供应商">
                            </el-table-column>
                            <el-table-column prop="modname" align="center" width="200" label="产品名称">
                            </el-table-column>
                            <el-table-column prop="QtyRev" align="center" label="待收货数量">
                            </el-table-column>
                            <el-table-column align="center" label="委外交期">
                                <template slot-scope="scope">
                                <div :class="scope.row.Stauts" v-html="scope.row.date">
                                </div>
                            </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>
            </div>
            <div class="main-right">
                <div class="border-container">
                    <div class="name-title">
                        注塑待入库
                    </div>
                    <div>
                        <el-table :data="defaultDt3" :height=el_table_height stripe="true" :default-sort="{prop: 'date', order: 'ascending'}" ref="defaultDt3">
                            <el-table-column prop="poid" align="center" label="任务单号" width="210">
                            </el-table-column>
                            <el-table-column prop="MkCode" align="center" label="小微">
                            </el-table-column>
                            <el-table-column prop="modname" align="center" width="200" label="产品名称">
                            </el-table-column>
                            <el-table-column prop="QtyRev" align="center" label="待入数量">
                            </el-table-column>
                            <el-table-column prop="date" :formatter="formatterTime" align="center" label="生产交期">
                                <template slot-scope="scope">
                                <div :class="scope.row.Stauts" v-html="scope.row.date">
                                </div>
                            </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>
                <div class="border-container">
                    <div class="name-title">
                        组装待入库
                    </div>
                    <div>
                        <el-table :data="defaultDt4" stripe="true" :height=el_table_height :default-sort="{prop: 'date', order: 'ascending'}" ref="defaultDt4">
                            <el-table-column prop="PAT" align="center" label="任务单号" width="210">
                            </el-table-column>
                            <el-table-column prop="MkCode" align="center" label="小微">
                            </el-table-column>
                            <el-table-column prop="modname" align="center" width="200" label="产品名称">
                            </el-table-column>
                            <el-table-column prop="QtyRev" align="center" label="待入数量">
                            </el-table-column>
                            <el-table-column prop="date" :formatter="formatterTime" align="center" label="生产交期">
                                <template slot-scope="scope">
                                <div :class="scope.row.Stauts" v-html="scope.row.date">
                                </div>
                            </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>
            </div>
        </div>
    </div>

</body>



<script>
    $("#P").text(navigator.platform)

    new Vue({
        el: '#app',
        data() {
            return {
                el_table_height: 350,
                defaultDt1: [],
                defaultDt2: [],
                defaultDt3: [],
                defaultDt4: [],
            }
        },
        methods: {
            tableRowClassName({
                row,
                rowIndex
            }) {
                if (row.Stauts == "open") {
                    return 'open';
                } else {
                    return 'close';
                }
            },
            GetTabelDate(that) {
                // 材料采购待收货
                GetCodeData("VB21071915003997", "Get", "InStore").then(function(res) {

                        that.defaultDt1 = res.rows
                        console.dir(that.defaultDt1);
                    }),
                    //委外加工待收货
                    GetCodeData("VB21071915320986", "Get", "InStore").then(function(res) {
                        that.defaultDt2 = res.rows
                    }),
                    //注塑待入库
                    GetCodeData("VB21071915453890", "Get", "InStore").then(function(res) {
                        that.defaultDt3 = res.rows
                    }),
                    //组装待入库
                    GetCodeData("VB21071915544656", "Get", "InStore").then(function(res) {
                        that.defaultDt4 = res.rows
                    })
            },
            formatterTime(row, column) {
                let data = row[column.property]
                return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data)
            }
        },

        mounted() {
            TableAotoRoll([this.$refs.defaultDt1, this.$refs.defaultDt2, this.$refs.defaultDt3, this.$refs.defaultDt4])
            var that = this
            setTimeout(function() {
                that.GetTabelDate(that)
            }, 0);
            setInterval(function() {
                that.GetTabelDate(that)
            }, 1000 * 60);
        }
    })
</script>



</html>